/** * @description: 校园安全数据一览*/
<template>
  <div class="pub-container home">
    <!-- 学生预警 -->
    <StuWarning @skipDetail="skipDetail" />

    <!-- 辅导员工作进度 -->
    <CounsellorRate @skipDetail="skipDetail" />

    <!-- 五困生占比 -->
    <PieEchart
      v-if="isApiComp"
      pieShowId="percentFiveHard"
      :optionData="percentFiveHardData"
      :colorList="percentColorList"
      pieTitleText="学校总人数"
      titleText="五困生占比"
      path="/fiveHard"
    />

    <!-- 学生请假数据 -->
    <div class="leave-box">
      <!-- 课堂请假状态 -->
      <PieEchart
        v-if="isApiComp"
        pieShowId="classroomLeave"
        :optionData="classroomLeaveData"
        :colorList="classroomLeaveColorList"
        pieTitleText="学校总数"
        titleText="课堂请假状态"
        path="/leaveStatistics"
      />
      <!-- 非课堂请假离校状态 -->
      <PieEchart
        v-if="isApiComp"
        pieShowId="noClassroomLeave"
        :optionData="noClassroomLeaveData"
        :colorList="noClassroomLeaveColorList"
        pieTitleText="学校总数"
        titleText="非课堂请假离校状态"
      />
    </div>
  </div>
</template>

<script>
import StuWarning from './components/stuWarning'
import CounsellorRate from './components/counsellorRate'
import PieEchart from '@/components/pieEchart'
import { difficultStuSchool } from '@/api/fiveHard'
export default {
  name: 'Home',
  components: { StuWarning, CounsellorRate, PieEchart },
  data() {
    return {
      //五困生占比
      percentColorList: ['#2CCDA8', '#2181FB'],
      percentFiveHardData: [
        {
          name: '五困生',
          value: 0,
        },
        {
          name: '非困难学生',
          value: 0,
        },
      ],

      //课堂请假状态
      classroomLeaveColorList: ['#FF7483', '#21A6FB', '#2CCDA8'],
      classroomLeaveData: [
        {
          name: '未扫码离校',
          value: 100,
        },
        {
          name: '离校中',
          value: 258,
        },
        {
          name: '已返校签到',
          value: 1000,
        },
      ],

      //非课堂请假离校状态
      noClassroomLeaveColorList: ['#2CCDA8', '#2181FB'],
      noClassroomLeaveData: [
        {
          name: '请假中',
          value: 100,
        },
        {
          name: '假期结束',
          value: 125,
        },
      ],

      isApiComp: false,
    }
  },
  created() {
    this.getDifficultStuSchool()
  },
  methods: {
    // 获取全校五困生数据
    async getDifficultStuSchool() {
      try {
        const { data } = await difficultStuSchool()

        //五困生占比
        this.percentFiveHardData[0].value = data.data.difficultStuNums || 0
        this.percentFiveHardData[1].value = data.data.unDifficultStuNums || 0
        this.isApiComp = true
      } catch (e) {
        console.log(e)
      }
    },

    //详情跳转
    skipDetail(path, active) {
      this.$router.push({
        path,
        query: {
          active,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;
  .title-wrapper {
    @include fcb();
    h4 {
      font-size: $fz16;
      color: $color-title;
    }
    span {
      font-size: $fz14;
    }
  }
}
.leave-box {
  background: $bg-white;
  .floor + .floor {
    margin-top: 0;
  }
}
</style>
